<template>
  <view class="page">
    <image src="/static/dingbu.png" class="mine-navbar-bg" mode="aspectFill" />
    <u-navbar title="抽样单详情" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />
    <view style="height: 80rpx;"></view>

    <view class="content">
      <view class="card">
        <view class="section-title">抽样信息</view>
        <view class="kv">
          <view class="row"><text class="k">实验室编号</text><text class="v">{{ info.code }}</text></view>
          <view class="row"><text class="k">抽样单位</text><text class="v">{{ info.sampler }}</text></view>
          <view class="row"><text class="k">抽样地点</text><text class="v">{{ info.address }}</text></view>
          <view class="row"><text class="k">样品名称</text><text class="v">{{ info.sampleName }}</text></view>
          <view class="row"><text class="k">抽样品种</text><text class="v">{{ info.variety }}</text></view>
          <view class="row"><text class="k">抽样时间</text><text class="v">{{ info.time }}</text></view>
        </view>
      </view>

      <view class="ops">
        <button class="btn ghost" @click="goBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: { code: '', sampler: '张三', address: '山东省济南市历下区某果园', sampleName: '土壤', variety: '樱桃', time: '2024-05-10 9:15:23' }
    }
  },
  onLoad(query) { if (query && query.code) this.info.code = query.code },
  methods: { goBack(){ uni.navigateBack() } }
}
</script>

<style lang="scss">
$brand: #29a74d; $brand-weak: #e9f7ee; $brand-border: #cfe9db; $brand-strong: #239243;
.mine-navbar-bg { position: fixed; top: 0; left: 0; width: 100%; height: 180rpx; z-index: 2; }
.page { background: #f6f7fb; min-height: 100vh; }
.content { padding: 24rpx; }
.card { background: #fff; border: 1rpx solid #e3f3ea; border-radius: 18rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 8rpx 22rpx rgba(12,18,28,.05); }
.section-title { font-weight: 700; color: #111827; margin-bottom: 8rpx; }
.kv .row { display: flex; align-items: center; gap: 16rpx; padding: 10rpx 0; }
.kv .k { width: 180rpx; color: #6b7280; }
.kv .v { flex: 1; color: #1f2937; }
.ops { display: flex; justify-content: flex-end; gap: 16rpx; margin-top: 16rpx; }
.btn { height: 68rpx; line-height: 68rpx; padding: 0 28rpx; border-radius: 999rpx; font-size: 26rpx; border: none; }
.btn.ghost { background: #fff; color: $brand-strong; box-shadow: inset 0 0 0 1rpx $brand-border; }
</style>
